<template>
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入小区或地址"
      background="#f6f5f6"
      @search="onSearch"
      @cancel="onCancel"
    />
    <van-cell
      v-for="item in checkedList"
      :key="item"
      :title="item"
      v-show="isShow"
      @click="choseFn(item)"
    />
  </form>
</template>

<script>
import { cityKeyWords, getCityByName } from '@/api/area'
export default {
  data () {
    return {
      value: '',
      list: [],
      checkedList: [],
      isShow: false
    }
  },
  async created () {
    const { body } = await getCityByName(localStorage.getItem('cityName'))
    console.log(body)
    const id = body.value
    const name = body.label
    const res = await cityKeyWords({
      name,
      id
    })
    console.log(res)
    this.list = res.body.map((item) => item.communityName)
  },
  methods: {
    onSearch (val) {
      console.log(val)
      this.checkedList = this.list.filter((item) => {
        return item.includes(val)
      })
      this.isShow = true
    },
    onCancel () {
      this.$router.push('/add')
    },
    choseFn (val) {
      console.log(val)
      localStorage.setItem('communityName', val)
      this.$router.push('/add')
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-search__content,
.van-search__content--square {
  background-color: #fff;
}
</style>
